
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 柱状图分页示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.0.1/dist/echarts.min.js"></script>
    <style>
        #chart-container { width: 800px; height: 500px; margin: 30px auto; }
    </style>
</head>
<body>
    <div id="chart-container"></div>
    <script>
        // 模拟长数据（50条）
        const longDataArray = [];
        const valueArray = [];
        for (let i = 1; i <= 50; i++) {
            longDataArray.push(`数据项${i}`);
            valueArray.push(Math.round(Math.random() * 1000));
        }

        const chart = echarts.init(document.getElementById('chart-container'));
        const option = {
            title: { text: '大数据量柱状图分页展示' },
            tooltip: { trigger: 'axis' },
            grid: { bottom: '15%' },
            dataZoom: [{
                type: 'slider',
                orient: 'horizontal',
                start: 0,
                end: 20,
                show: true,
                height: 15,
                bottom: 5,
                fillerColor: '#269cdb'
            }, {
                type: 'inside',
                start: 0,
                end: 100
            }],
            xAxis: { 
                type: 'category',
                data: longDataArray,
                axisLabel: { 
                    interval: 0,
                    rotate: 30  // 标签旋转防重叠
                }
            },
            yAxis: { type: 'value' },
            series: [{
                type: 'bar',
                data: valueArray,
                itemStyle: { color: '#5470c6' },
                barWidth: '60%'
            }]
        };
        chart.setOption(option);
        window.addEventListener('resize', function() { chart.resize(); });
    </script>
</body>
</html>
